<template>
	<view class="page-content">
		<view class="header-box">
			<image class="image_4"
				src="https://ide.code.fun/api/image?token=66078e54d52b7700115185b5&name=73e00fefe998196ad182009ca4210742.png" />
		</view>
		<view class="content-box">
			<view class="flex-col relative section">
				<text class="self-start text_2">{{formdata.name}}</text>
				<view class="flex-col self-stretch group_4">
					<view class="flex-row items-center self-stretch group_5">
						<view class="section_2"></view>
						<text class="font ml-9">基本信息</text>
					</view>
					<view class="grid">
						<view class="flex-col items-start relative grid-item">
							<text class="font_2">体重</text>
							<text class="mt-12 font_3">{{formdata.weight}}kg</text>
						</view>
						<view class="flex-col items-start relative grid-item">
							<text class="font_2">品种</text>
							<text class="font_3 mt-11">{{formdata.breed}}</text>
						</view>
						<view class="flex-col items-start relative grid-item">
							<text class="font_2">性别</text>
							<text class="font_3 mt-11">{{formdata.sex==0?'公':'母'}}</text>
						</view>
						<view class="flex-col items-start relative grid-item">
							<text class="font_2">宠物年龄</text>
							<text class="mt-10 font_3">{{formdata.age}}</text>
						</view>
						<view class="flex-col items-start relative grid-item">
							<text class="font_2">疫苗接种情况</text>
							<text class="mt-10 font_3">{{formdata.ifVaccination?'已接种':'未接种'}}</text>
						</view>
					</view>
					<text class="self-start font_2 text_3">备注</text>
					<text class="self-center font_3 text_4">
						{{formdata.feature}}
					</text>
				</view>
				<view class="flex-col self-stretch group_6">
					<view class="flex-row items-center group_7">
						<view class="section_2"></view>
						<text class="font text_5 ml-9">丢失地点</text>
					</view>
					<view class="flex-col justify-start items-start section_3">
						<map style="width: 100%; height: 320rpx;border-radius: 16rpx 16rpx 16rpx 16rpx;" :latitude="formdata.lng"
							:longitude="formdata.lat">
						</map>
						<view class="section_4"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-box">
			<view class="flex-row items-center group_5">
				<view class="flex-col items-start shrink-0">
					<text class="font_2 text_6">悬赏金额</text>
					<view class="group_8 mt-9">
						<text class="text_8">￥</text>
						<text class="text_7">{{formdata.rewardAmount}}</text>
					</view>
				</view>
				<view class="flex-col justify-start items-center button text-wrapper ml-23"
					@click="handleToChat(formdata.userId)"><text class="font">联系宠主</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import reportLoss from "../../../api/reportLoss.js";
	export default {
		data() {
			return {
				formdata: {
					name: '',
					age: "",
					breed: "",
					certificateId: 0,
					colour: "",
					feature: "",
					frontalView: "",
					ifVaccination: false,
					lat: 0,
					leftSideView: "",
					lng: 0,
					lossAddress: "",
					remark: "",
					rewardAmount: "",
					rightSideView: "",
					sex: "",
					weight: "",
				},
			}
		},
		onLoad(option) {
			this.getDetail(option.id)
		},
		methods: {
			getDetail(id) {
				reportLoss.getPetLossOfferById(id).then(res => {
					if (res.code === 200) {
						this.formdata = res.data
					} else {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						})
					}
					console.log(res);
				}).catch(err => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
					console.log(err);
				})
			},
			handleToChat(id) {
				uni.navigateTo({
					url: '/pages/news/user-chat/user-chat?userId=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		.header-box {
			height: 744rpx;

			>image {
				height: 744rpx;
				width: 100%;
			}
		}

		.content-box {
			position: relative;
			z-index: 99;

			.mt-11 {
				margin-top: 22rpx;
			}

			.ml-9 {
				margin-left: 18rpx;
			}

			.section {
				margin: -88rpx 32rpx 0;
				padding-top: 60rpx;
				background-color: #ffffff;
				border-radius: 24rpx;

				.text_2 {
					margin-left: 44rpx;
					color: #000000;
					font-size: 48rpx;
					font-family: PingFang SC;
					font-weight: 700;
					line-height: 43.44rpx;
				}

				.group_4 {
					margin-top: 56rpx;

					.group_5 {
						padding: 0 32rpx;
					}

					.grid {
						margin-top: 20rpx;
						height: 365.72rpx;
						display: grid;
						grid-template-rows: repeat(3, minmax(0, 1fr));
						grid-template-columns: repeat(2, minmax(0, 1fr));
						row-gap: 0;
						column-gap: 112.38rpx;

						.grid-item {
							padding: 28rpx 40rpx;
							width: 287.8rpx;
						}
					}

					.font_2 {
						font-size: 24rpx;
						font-family: PingFang SC;
						line-height: 21.88rpx;
						color: #999999;
					}

					.text_3 {
						margin-left: 40rpx;
						margin-top: 28rpx;
						line-height: 22.3rpx;
					}

					.font_3 {
						font-size: 28rpx;
						font-family: PingFang SC;
						line-height: 25.7rpx;
						font-weight: 700;
						color: #000000;
					}

					.text_4 {
						margin-top: 16rpx;
						line-height: 34rpx;
						width: 586rpx;
					}
				}

				.group_6 {
					margin-top: 36rpx;
					padding: 8rpx 32rpx 40rpx;
					border-top: solid 8rpx #f6f6f6;

					.group_7 {
						padding: 44rpx 0 24rpx;

						.text_5 {
							line-height: 29.72rpx;
						}
					}

					.section_3 {
						border-radius: 16rpx;
						height: 320rpx;
						width: 100%;
						overflow: hidden;

						// .section_4 {
						// 	margin-left: 292rpx;
						// 	background-color: #fbd610;
						// 	box-shadow: 0rpx 8rpx 8rpx #00000040;
						// 	border-radius: 50%;
						// 	width: 24rpx;
						// 	height: 24rpx;
						// 	border-left: solid 4rpx #ffffff;
						// 	border-right: solid 4rpx #ffffff;
						// 	border-top: solid 4rpx #ffffff;
						// 	border-bottom: solid 4rpx #ffffff;
						// }
					}
				}

				.section_2 {
					background-color: #fbd610;
					border-radius: 6rpx;
					width: 8rpx;
					height: 40rpx;
				}

				.font {
					font-size: 32rpx;
					font-family: PingFang SC;
					line-height: 29.92rpx;
					font-weight: 700;
					color: #000000;
				}
			}
		}

		.bottom-box {
			padding: 32rpx 0;
			background-color: #FFFFFF;

			.mt-9 {
				margin-top: 18rpx;
			}

			.ml-23 {
				margin-left: 46rpx;
			}

			.group_5 {
				padding: 0 32rpx;

				.font_2 {
					font-size: 24rpx;
					font-family: PingFang SC;
					line-height: 21.88rpx;
					color: #999999;
				}

				.text_6 {
					color: #000000;
					line-height: 22.34rpx;
				}

				.group_8 {
					line-height: 28.48rpx;

					.text_8 {
						color: #ff7676;
						font-size: 24rpx;
						font-family: D-DIN;
						line-height: 17.72rpx;
					}

					.text_7 {
						color: #ff7676;
						font-size: 40rpx;
						font-family: D-DIN;
						line-height: 28.48rpx;
					}
				}

				.button {
					flex: 1 1 0;

					.font {
						font-size: 32rpx;
						font-family: PingFang SC;
						line-height: 29.92rpx;
						font-weight: 700;
						color: #000000;
					}
				}

				.text-wrapper {
					padding: 28rpx 0;
					background-color: #fbd610;
					border-radius: 68rpx;
					overflow: hidden;
					height: 88rpx;
				}
			}
		}
	}
</style>